<template>
  <div class="goods-add">
    <!-- 步骤条 -->
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1" description="基本信息"></el-step>
      <el-step title="步骤 2" description="商品图片"></el-step>
      <el-step title="步骤 3" description="商品内容"></el-step>
    </el-steps>
    <!-- tab栏 -->
    <el-tabs tab-position="left" v-model="tabActive" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="0">
        <!-- 基本信息表单 -->
        <el-form :model="form" label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="form.goods_price" placeholder="请输入商品价格"></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input v-model="form.goods_weight" placeholder="请输入商品重量"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="form.goods_number" placeholder="请输入商品数量"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-cascader :props="props" v-model="form.goods_cat" :options="options" clearable></el-cascader>
          </el-form-item>
        </el-form>
        <el-button style="margin-top: 12px;" type="primary" @click="next">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="商品图片" name="1">
        <!-- 上传图片 -->
        <el-upload
          action="http://localhost:8888/api/private/v1/upload/"
          list-type="picture-card"
          name="file"
          :headers="headers"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
        <el-button style="margin-top: 12px;" type="primary" @click="next">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="商品内容" name="2">
        <quill-editor
          v-model="form.goods_introduce"
        ></quill-editor>
        <el-button style="margin-top: 12px;" type="primary" @click="addGoods">完成</el-button>
      </el-tab-pane>
    </el-tabs>
    <!-- 下一步按钮 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      tabActive: '',
      form: {
        goods_name: '',
        goods_cat: '',
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        pics: [],
        goods_introduce: ''
      },
      options: [],
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      dialogImageUrl: '',
      dialogVisible: false,
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }
  },

  async created () {
    const { meta, data } = await this.$axios.get('categories?type=3')
    if (meta.status === 200) {
      this.options = data
      console.log(this.options)
    } else {
      this.$message.error(meta.msg)
    }
  },

  methods: {
    // 下一步
    next () {
      this.active++
      this.tabActive = this.active.toString()
    },
    // 点击tabs栏
    handleClick () {
      this.active = +this.tabActive
    },
    // 上传图片地址
    handleSuccess (response, file, fileList) {
      const { meta, data } = response
      if (meta.status === 200) {
        this.form.pics.push({
          pic: data.tmp_path
        })
      } else {
        this.$message.error(meta.msg)
      }
    },
    // 删除上传图片
    handleRemove (file, fileList) {
      const path = file.response.data.tmp_path
      this.form.pics = this.form.pics.filter(item => item.pic !== path)
    },
    // 预览图片
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 完成 发送ajax请求添加goods
    async addGoods () {
      if (this.form.goods_name === '') {
        this.$message.error('商品名称不能为空')
        return
      }
      if (this.form.goods_cat === '') {
        this.$message.error('商品分类不能为空')
        return
      }
      if (this.form.goods_price === '') {
        this.$message.error('商品价格不能为空')
        return
      }
      if (this.form.goods_number === '') {
        this.$message.error('商品数量不能为空')
        return
      }
      if (this.form.goods_weight === '') {
        this.$message.error('商品重量不能为空')
        return
      }
      const { meta } = await this.$axios.post('goods', {
        ...this.form, goods_cat: this.form.goods_cat.join(',')
      })
      if (meta.status === 201) {
        this.$message.success(meta.msg)
        this.$router.push('/goods')
      } else {
        this.$message.error(meta.msg)
      }
    }
  }
}
</script>

<style lang="scss">
  .quill-editor{
    background-color: #fff;
    .ql-editor {
      min-height: 300px;
    }
  }
</style>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
